<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, genFileId } from 'element-plus'
import { isNull } from '/@/utils/assertUtils'
import { SqlConvertControllerService } from '/@/api/openapi'
const dtoString = ref<string>('')
const markdownString = ref<string>('# Hello')


async function uploadOnEnter() {

  if (isNull(dtoString.value)) {
    ElMessage({
      type: 'error',
      message: '请输入正确的字符串',
    })
  }
  SqlConvertControllerService.convertDtoToMarkdown({
    sql: dtoString.value,
  }).then((res) => {
    if (res.code === 200) {
      if (res.data !== undefined) {
        markdownString.value = res.data
      }
    } else {
      ElMessage({
        type: 'error',
        message: res.message,
      })
    }
  })
}
const copy = async () => {
  try {
    await navigator.clipboard.writeText(markdownString.value)
    ElMessage({
      type: 'success',
      message: '已经复制到剪切板',
    })
  } catch (err) {
    console.error('无法复制文本: ', err)
  }
}
</script>

<template>
  <el-card class="DtoToMarkdown">
    <el-row :gutter="12" class="top">
      <el-col :span="12">
      </el-col>
      <el-col :span="12">
        <el-button type="primary" @click="copy">复制到剪切板</el-button>
      </el-col>
    </el-row>
      <el-row :gutter="12">
        <el-col :span="12" >
          <el-input
            type="textarea"
            style="width: 100%;height: 100%"
            :rows="20"
            placeholder="请输入DTO内容, 按回车即可上传"
            v-model="dtoString"
            @keydown.enter.prevent="uploadOnEnter"
          ></el-input>
        </el-col>

        <el-col :span="12">
          <MdViewer :value="markdownString"></MdViewer>
        </el-col>
      </el-row>
  </el-card>
</template>

<style scoped lang="scss">
.DtoToMarkdown{
  margin: 10px auto;
  min-height: calc(100vh - 140px);
  width: 90%;
  background-color: #f5f7f8;
  padding: 10px;
}
.top{
  margin-bottom: 10px;
}
</style>